在 Backgrounds & Border Level 3 當時還在草稿階段時,WG的成員有討論過多重邊界的可能性,就像現在 background 可以設很多個一樣。但是這個提案當時的成員認為用處不大,因此最終沒有成為標準。
現在開發者們要實現多重邊界,最常用 box-shadow
。
box-shadow
本身有5個屬性,第4個屬性比較少用到,叫做 spread radius,用來指定陰影的寬度。在其它值(offset, spread, blur) 都是0的狀況下,完全不透明的陰影看起來就像是邊界。
box-shadow
同時可以設多個,後面設的陰影會顯示在下面,所以我們可以利用這個特性製造多重邊界的效果,只是要注意在下方的 box-shadow
它的 spread radius 值要是上方陰影的總合加上自己的寬度。
用這個方法要注意的地方是,陰影是沒有實體的,所以它不被算在 width & height 之內,當然也就無法觸發滑鼠事件例如 hover 或 click。